<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page import="com.wgn.reportquery.utils.*"%>
<%@ page import="com.wgn.reportquery.service.*"%>
<%
	String qtype="'指标'";
	String datatype = request.getParameter("datatype");
	System.out.println(datatype);
	QueryService q = new QueryService();
if(null!=datatype){
	q.getDataArray(datatype);
	qtype = q.getDataType();
	//qtype = datatype;//new String(datatype.getBytes("iso-8859-1"), "utf-8");	
	System.out.println(qtype);
//	String 
	
}
	
%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>报告图表</title>
<script src="../../dist/Chart.bundle.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
</style>
</head>

<body>
	<div style="width: 75%;">
		<canvas id="canvas"></canvas>
		<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
	</div>
	<br>
	<br>
	<!-- <button id="randomizeData">Randomize Data</button> -->
	<script>
        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var progress = document.getElementById('animationProgress');
        var config = {
            type: 'line',
            data: {
               labels:<%out.println(q.getxList());%> 
            	   //["January", "February", "March", "April", "May", "June", "July"]
        ,
                datasets: [{
                	label:<%out.println(qtype);%>,
                    fill: false,
                    borderColor: window.chartColors.red,
                    backgroundColor: window.chartColors.red,
                    data: 
                    <%out.println(q.getyList());%>
                }<%--, {
                    label: "My Second dataset ",
                    fill: false,
                    borderColor: window.chartColors.blue,
                    backgroundColor: window.chartColors.blue,
                    data: [
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor()
                    ]
                }--%>]
            },
            options: {
                title:{
                    display:true,
                    text:"图表"
                },
                animation: {
                    duration: 2000,
                    onProgress: function(animation) {
                        progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
                    },
                    onComplete: function(animation) {
                        window.setTimeout(function() {
                            progress.value = 0;
                        }, 2000);
                    }
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
        };


    </script>
</body>

</html>